<template>
  <ul class="tab-bar">
    <li class="tab-item" :class="[item.value == value ? 'active' : '', index == 0 ? 'left' : 'right']" v-for="(item,index) of tabList" :key="index" @click="changeTab(item,index)">
      {{item.label}}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    value: {},
  },
  data() {
    return {
      tabList: [
        { label: '天天惊喜特价', value: 1 },
        { label: '天天特价预告', value: 3 },
      ],
    }
  },
  methods: {
    changeTab(item, index) {
      if(this.value == item.value) return
      this.$emit('input', item.value)
      this.$emit('change', item.value, item, index)
    },
  },
}
</script>

<style lang="less" scoped>
.tab-bar {
  display: flex;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;

  .tab-item {
    width: 50%;
    height: 100%;
    text-align: center;
    font-size: 32px;
    font-family: PingFang, PingFang-Regular;
    font-weight: 400;
    text-align: center;
    background-color: #ff831c;
    color: #ffffff;

    &.active {
      font-size: 32px;
      font-family: PingFang, PingFang-Medium;
      font-weight: 500;
      text-align: center;
      color: #ff831c;
      background: #ff831c;
      // background-color: #ff831c;
      // background-image: ;
    }
    &.active.left {
      background-image: url('~@/assets/img/banner_left.png');
      background-size: 100%;
    }
    &.active.right {
      background-image: url('~@/assets/img/banner_right.png');
      background-size: 100%;
    }
  }
}
</style>